<template>
  <div class="app-container">
    <!-- 查询表单 -->
    <el-form :model="queryInfo" label-width="80px" :inline="true" size="small">
      <el-form-item label="讲师姓名">
        <el-input v-model="queryInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="讲师头衔">
        <el-select v-model="queryInfo.level" placeholder="请选择">
          <el-option key="0" label="-请选择-" value=""></el-option>
          <el-option key="1" label="高级讲师" value="1"></el-option>
          <el-option key="2" label="首席讲师" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入职时间">
        <el-date-picker
          clearable
          v-model="dates"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="changeDate"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格数据 -->
    <el-table :data="tableList" highlight-current-row size="small">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="讲师姓名" prop="name"></el-table-column>
      <el-table-column
        label="讲师简介"
        prop="intro"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="讲师资历" prop="career"></el-table-column>
      <el-table-column label="头衔" prop="level">
        <template slot-scope="scope">
          {{ scope.row.level == "1" ? "高级讲师" : "首席讲师" }}
        </template>
      </el-table-column>
      <el-table-column label="头像" prop="avatar">
        <template slot-scope="scope">
          <img
            :src="scope.row.avatar"
            alt="头像"
            style="width: 50px; height: 50px"
          />
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort"></el-table-column>
      <el-table-column label="入职时间" prop="gmtCreate"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      style="margin-top:20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pageNum"
      :page-sizes="[5, 10, 50, 100]"
      :page-size="queryInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import teacherApi from "@/api/teacher";
export default {
  name: "teacherList",
  data() {
    return {
      queryInfo: {
        pageNum: 1,
        pageSize: 5,
        name:null,
        level:null,
        begin:null,
        end:null
      },
      tableList: [],
      total: 0,
      dates:null
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await teacherApi.pageQueryTeacher(this.queryInfo);
      if (res.success) {
        this.tableList = res.data.rows;
        this.total = res.data.total;
      } else {
        return this.$message.error(res.msg);
      }
    },
    handleQuery() {
      this.queryInfo.pageNum = 1;
      this.getList();
    },
    changeDate(data) {
      this.dates = data;
      this.queryInfo.begin = this.dates[0]
      this.queryInfo.end = this.dates[1]
    },
    handleCurrentChange(newNum) {
      this.queryInfo.pageNum = newNum;
      this.getList();
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getList();
    },
    handleEdit(id) {
      if(id){
        this.$router.push({
          path:"/teacher/save",
          query:{ id }
        })
      }
    },
    handleDel(id) {
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await teacherApi.removeTeacher(id);
          console.log(res);
          if(res.success) {
            this.$message.success("删除成功");
            this.getList();
          }else{
            return this.$message.error(res.msg);
          }
        })
    }
  }
};
</script>

<style lang="scss" scoped>
</style>